import React, { Component } from 'react'
import { Card, Table, Icon, Button, Modal } from 'antd'
import './index.less'
import LinkButton from '../../components/link-button'
import { reqCatagoryList, reqUpdateCategory } from '../../api'
import UpdateForm from './components/update-form'

export default class Category extends Component {
  constructor(props) {
    super(props)
    this.state = {
      modalVisible: 0, //添加分类与修改分类的Modal显示，0是关闭,1是添加,2是修改
      categoryList: [],
      subCategoryList: [],
      parentId: '0',
      loading: false
    }

    this.columns = this.initColumns()
  }

  initColumns = () => {
    return [
      {
        title: '分类名称',
        key: 'name',
        dataIndex: 'name'
      },
      {
        title: '操作',
        key: 'operate',
        width: 400,
        render: record => {
          return (
            <span>
              <LinkButton onClick={() => this.updateCategory(record)}>
                修改分类
              </LinkButton>
              <LinkButton>查看子分类</LinkButton>
            </span>
          )
        }
      }
    ]
  }

  //获取分类列表
  getCategoryList = async () => {
    const { parentId } = this.state
    this.setState({ loading: true })

    const { data } = await reqCatagoryList({ parentId })
    if (parentId === '0') {
      this.setState({ categoryList: data, loading: false }) //一级列表
    } else {
      this.setState({ subCategoryList: data, loading: false }) //二级列表
    }
  }

  //添加分类
  addCatagory = () => {
    this.setState({
      modalVisible: 1
    })
  }

  //修改分类
  updateCategory = record => {
    console.log('record', record)
    //当前操作的分类名称记录
    this.currentCategory = record
    this.setState({
      modalVisible: 2
    })
  }
  //修改分类（请求后台）
  updateCategoryModalHandleOk = () => {
    this.form.validateFields(async (errors, values) => {
      if (!errors) {
        this.setState({
          loading: true
        })
        const { categoryName } = values
        const params = {
          categoryName,
          categoryId: this.currentCategory._id
        }

        //解决缓存问题
        this.form.resetFields()

        const result = await reqUpdateCategory(params)
        if (result.status === 0) {
          this.setState({
            modalVisible: 0,
            loading: false
          })
          //更新列表
          this.getCategoryList()
        }
      }
    })
  }

  closeModal = () => {
    this.setState({
      modalVisible: 0
    })

    //解决缓存问题
    this.form.resetFields()
  }

  componentDidMount() {
    this.getCategoryList()
  }

  render() {
    const columns = this.columns
    const {
      categoryList,
      subCategoryList,
      parentId,
      loading,
      modalVisible
    } = this.state

    const title = '一级标题'
    const currentCategory = this.currentCategory || {}
    return (
      <div>
        <Card
          title={title}
          bordered={false}
          extra={
            <Button type="primary" onClick={this.addCatagory}>
              <Icon type="plus"></Icon>添加分类
            </Button>
          }
        >
          <Table
            bordered
            dataSource={parentId === '0' ? categoryList : subCategoryList}
            rowKey="_id"
            columns={columns}
            loading={loading}
            pagination={{
              pageSize: 5,
              showQuickJumper: true
            }}
          />
        </Card>

        <Modal
          visible={modalVisible === 1}
          title="添加分类"
          onOk={this.handleOk}
          onCancel={this.closeModal}
        ></Modal>

        <Modal
          visible={modalVisible === 2}
          title="修改分类"
          onOk={this.updateCategoryModalHandleOk}
          onCancel={this.closeModal}
        >
          <UpdateForm
            currentRowData={currentCategory}
            setForm={form => (this.form = form)}
          />
        </Modal>
      </div>
    )
  }
}
